<template>
	<view>
		<div style="height: 50rpx;background:#fff"></div>
		<Title :title="title" style="background-color: #fff;" />
		
		<!-- 展示售后情况 -->
			<view>
				<view class="bor_bgff disp_info">
					<view class="between text-333 font-bold fz28">
						<view class="title">
						{{$t('订单编号')}}
						</view>
						<view class="pr-15">
							{{ allInfo.order_no }}
						</view>
					</view>
					
					<view class="title">
						{{$t('售后类型')}}
					</view>
					<view class="info_text">
						{{ get(handlingInfo, "after_sales_config.title") || '' }}
					</view>
					<view class="title">
						{{$t('情况说明')}}
					</view>
					<view class="info_text" style="height: 220rpx;">
						{{get(handlingInfo, "situation.remark") || ''}}
					</view>
					<view class="item_photo">	
						<image v-for="item in handlingInfo.attachment" class="ph" :src="getImageUrl(item.path)" mode="aspectFill"></image>
					</view>
					<view class="title">
						{{$t('承接单位')}}
					</view>
					<view class="info_text">
						{{get(handlingInfo, "undertake_user.username") || ''}}
					</view>
					<view class="title">
						{{$t('售后诉求')}}
					</view>
					<view class="info_text" style="height: 220rpx;">
						{{get(handlingInfo, "ask.remark") || ''}}
					</view>
				</view>
				
				<view v-for="item in handlingInfo.list">
					<view  v-if="item.user_type == 'store'" >
						
						<view class="disp_title">
							{{$t('商家处理结果')}}
						</view>
					
						<view class="bor_bgff disp_info">
							<view class="title">
								{{$t('处理方式')}}
							</view>
							<view class="info_text">
								{{get(item, 'handle_config.title') || ''}}
							</view>
							<!-- <view v-if="item.handle_money && item.handle_money != '0'">
								<view class="title">
									{{$t('结算金额')}}
								</view>
								<view class="info_jiesuan">
									<view class="name">
										{{ allInfo.price_unit }} {{' '}} {{item.handle_money}}
									</view>
									<view class="jian">
										{{ item.difference }}
									</view>
								</view>
							</view> -->
							
							<view class="title">
								{{$t('处理说明')}}
							</view>
							<view class="info_text" style="height: 220rpx;">
								{{get(item, "handle_content.remark") || ''}}
							</view>
						</view>
					
					</view>
					<view v-else-if="item.user_type == 'platform'" class="">
						
						<view class="disp_title">
							{{$t('平台处理结果')}}
						</view>
						<view class="bor_bgff disp_info">
							<view class="title">
								{{$t('处理方式')}}
							</view>
							<view class="info_text">
								{{get(item, "handle_config.title") || ''}}
							</view>
							<view class="title">
								{{$t('处理说明')}}
							</view>
							<view class="info_text" style="height: 220rpx;">
								{{get(item, "handle_content.remark") || ''}}
							</view>
						</view>
				
					</view>
					<view v-else-if="item.user_type == 'user'" class="">
						
						<view class="disp_title">
							{{$t('用户沟通')}}
						</view>
						<view class="bor_bgff disp_info">
							<view class="title">
								{{$t('售后诉求')}}
							</view>
							<view class="info_text" style="height: 220rpx;">
								{{get(item, "handle_content.remark") || ''}}
							</view>
						</view>
				
					</view>
				</view>
			</view>
		
		
		<!-- 继续沟通-新增 -->
		<view class="p-10 bg-fff mb-20">
			
			<u--form
				:model="handlingForm"
				:rules="rulesStore"
				v-if="storeKey"
				ref="formInfo"
				class="ml-20 mr-20 formSty"
			> 
				<p class="titleSty">{{$t('处理方式')}}</p>
				<u-form-item
					prop="handle_type"
					ref="handle_type"
				>
					<!-- <u--textarea v-model="handlingForm.handle_content" class="textareaSty"></u--textarea> -->
					
					<u-button class="badBtn mb-35" @click="showPicker = true">
						<span class="text-333">{{ badInfo }}</span>
						<image class="w-20 h-15" src="/static/icon/downArrow.png"></image>
					</u-button>
					<u-picker :show="showPicker" :columns="handList" @cancel= "showPicker = false" keyName="title" @confirm="getSaleInfo"></u-picker>
				</u-form-item>
				<!-- <view v-if="handlingForm.handle_type == 26">
					<p class="titleSty">{{$t('结算金额')}}</p>
					<u-form-item
						prop="handle_money"
						ref="handle_money"
						labelWidth="150"
					>
						<u--input
							:placeholder="$t('请输入金额')"
							 class="inputSty2 mb-35"
							v-model="handlingForm.handle_money"
							@blur="inputNum"
						  >
							  <u--text
								:text="allInfo.price_unit"
								slot="prefix"
								margin="0 3px 0 0"
								type="tips"
							  ></u--text>
							<u--text
								:text="diffIng"
								slot="suffix"
								margin="0 3px 0 0"
								type="tips"
							></u--text>
						  </u--input>
					</u-form-item>
				</view> -->
				
				<p class="titleSty">{{$t('处理说明')}}</p>
				<u-form-item
					prop="handle_content"
					ref="handle_content"
				>
					<u--textarea v-model="handlingForm.handle_content" class="textareaSty mb-35"></u--textarea>
				</u-form-item>
			</u--form>
			
			<u--form
				:model="handlingForm"
				:rules="rules"
				v-else-if="continuekey"
				ref="formInfo"
				class="ml-20 mr-20 formSty"
			> 
				<p class="titleSty">{{$t('售后诉求')}}</p>
				<u-form-item
					prop="handle_content"
					ref="handle_content"
				>
					<u--textarea v-model="handlingForm.handle_content" class="textareaSty mb-35"></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<view class="empty"></view>
		<view v-if="handlingInfo.status == 0" class="footer_btn4">
			<view :disabled="btnDis" class="btn_item" @click="callUser">
				<image class="ico" src="/static/img/ico_b1.png" mode="aspectFill"></image>
				<view class="name">
					{{$t('联系商家')}}
				</view>
			</view>
			<u-button :disabled="btnDis || btnNo" class="btn_itemPlat" @click="platfornIntervention">
				<image class="ico" src="/static/img/ico_b2.png" mode="aspectFill"></image>
				<view class="name mt-10">
					{{$t('平台介入')}}
				</view>
			</u-button>
			<u-button :disabled="btnDis" v-if="!continuekey && !storeKey" class="btn_yellow" @click="continueFun">
				{{$t('继续协商')}}
			</u-button>
			<u-button :disabled="btnDis" v-else class="btn_yellow" @click="submit">
				{{$t('提交协商')}}
			</u-button>
			<u-button :disabled="btnDis" class="btn_blue" @click="complete">
				{{$t('协商一致')}}
			</u-button>
		</view>
	</view>
</template>

<script>
	import Title from './components/title.vue'
	import { getHandlingSituation, submitAfterSales, isHavePlatform, submitHandle, completeAfterSales, handleTypeSelect } from '@/api/order.js'
	import { request_minute } from '@/api/basic'
	export default {
		components: {
			Title
		},
		data() {
			return {
				title: this.$t('处理情况'),
				showPlat: false,
				storeKey: false,
				showPicker: false,
				show: false,
				btnDis:false,
				btnNo: false,
				handList: [],
				badInfo: '',
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				difference: '',
				show: false,
				continuekey: false,
				allInfo: {},
				diffIng: '',
				handlingForm: {
					handle_content:'',
					after_sales_id: '',
					handle_type: '',
					user_id: uni.getStorageSync("user_id"),
					// undertake_user_id:'',
					// delivery_id: '',
					user_type: ''
				},
				fileList1: [
					{ url: '/static/img/ph_1.png', },
					{ url: '/static/img/ph_1.png', },
					{ url: '/static/img/ph_1.png', }
				],
				handlingInfo: {},
				keyValue: '',
				after_sales_id: '',
				rules: {
					'handle_content': {
						type: 'string',
						required: true,
						message: this.$t('请填写售后诉求'),
						trigger: ['change']
					}
				},
				rulesStore:  {
					'handle_content': {
						type: 'string',
						required: true,
						message: this.$t('请填写处理说明'),
						trigger: ['change']
					},
					// 'handle_money': [
					// 	{
					// 		type: 'string',
					// 		required: true,
					// 		message: '请填写结算金额',
					// 		trigger: ['change']
					// 	},
					// 	{ pattern: /^\d+$/, message: '只能输入数字', trigger: 'change' }
					// ],
					'handle_type': {
						type: 'number',
						required: true,
						message: this.$t('请选择处理方式'),
						trigger: ['change']
					},
				},
				showSex: false,
			}
		},
		onLoad(options) {
			this.allInfo = JSON.parse(options.item)
			this.after_sales_id = this.allInfo.after_sale[0].id
			if (options.key) {
				this.keyValue = options.key
			}
			console.log('this.keyValue---', this.keyValue)
			console.log('00----', this.allInfo)
		  },
		mounted() {
			if(this.keyValue == 'store') {
				this.getHandling({
					after_sales_id: this.after_sales_id,
					user_id: this.allInfo.user_id
				})
			} else {
				this.getHandling({
					after_sales_id: this.after_sales_id,
					user_id: uni.getStorageSync("user_id")
				})
			}
			this.handleTypeSelect()
		},
		methods: {
			handleTypeSelect() {
				handleTypeSelect().then(res => {
					console.log('res---', res)
					if (res.data.code == 200) {
						this.handList = [res.data.data.data] || []
					} else {
						uni.$u.toast(res.data.message)
					}
				})
			},
			inputNum(e) {
				console.log('e00', e)
				if (this.allInfo.quotation_info[0].price > e) {
					this.diffIng = '减免 ' + this.allInfo.price_unit  + Math.abs(this.allInfo.quotation_info[0].price - e)
				} else {
					this.diffIng = '增加 ' + this.allInfo.price_unit + Math.abs(this.allInfo.quotation_info[0].price - e)
				}
				
			},
			getSaleInfo(e) {
				this.showPicker = false
				this.badInfo = e.value[0].title
				this.handlingForm.handle_type = e.value[0].id
				// if (e.value[0].id == 27) {
				// 	this.handlingForm.handle_money = ''
				// }
			},
			complete() {
				this.btnDis=true
				uni.showLoading({
					title: '加载中'
				});
				completeAfterSales({
					after_sales_id: this.after_sales_id || '',
					user_id: uni.getStorageSync("user_id")
				}).then(res => {
					if(res.data.code == 200) {
						uni.$u.toast('提交成功')
						uni.hideLoading()
						if (this.keyValue == 'store') {
							uni.redirectTo({
								url:'/pages/freightOrder/index?index=4'
							})
						} else {
							uni.redirectTo({
								url:'/pages/shipmentRecord/index?index=4'
							})
						}
						
						this.btnDis=false
					} else {
						uni.$u.toast(res.data.message)
						uni.hideLoading()
						this.btnDis=false
					}
				})
			},
			callUser() {
				if(this.keyValue == 'store') {
					console.log('1111111')
					request_minute({
						user_id: uni.getStorageSync("user_id"),
						target_id: this.allInfo.user_id,
					}).then(res => {
						// this.showInfo = true
						// this.contentInfo = res
						if (res.data.data.flag == 1) {
							this.isMessageGo({
								action: 'call',
								data: {
									userId: this.allInfo.user_id,
									type: res.data.data.type || 1,
								}
							})
						} else {
							uni.showToast({
								title: this.$t('积分不足，请充值积分'),
								icon: "none",
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/vip/scorePoint',
									webview: 'zWebView'
								})
							}, 500)
						}
						console.log('res0000', res)
					})
				} else {
					console.log('22222')
					request_minute({
						user_id: uni.getStorageSync("user_id"),
						target_id: this.allInfo.cooperate.id,
					}).then(res => {
						// this.showInfo = true
						// this.contentInfo = res
						if (res.data.data.flag == 1) {
							this.isMessageGo({
								action: 'call',
								data: {
									userId: this.allInfo.cooperate.id,
									type: res.data.data.type || 1,
								}
							})
						} else {
							uni.showToast({
								title: this.$t('积分不足，请充值积分'),
								icon: "none",
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/vip/scorePoint',
									webview: 'zWebView'
								})
							}, 500)
						}
						console.log('res0000', res)
					})
				}
				
			},
			continueFun() {
				if (this.keyValue == 'store') {
					this.storeKey = true
				} else {
					this.continuekey = true
				}
			},
			platfornIntervention() {
				this.btnNo = true
				isHavePlatform({after_sales_id: this.after_sales_id}).then(res => {
					console.log('res---', res)
					if(res.data.code == 200) {
						console.log('11111111')
						if (res.data.data.data == null) {
							this.handlingForm.after_sales_id = this.after_sales_id || ''
							this.handlingForm.user_type = 'platform'
							submitHandle({
								...this.handlingForm
								}).then(res => {
								if(res.data.code == 200) {
									uni.$u.toast('提交成功')
								} else {
									uni.$u.toast(res.data.message)
								}
							})
						} else {
							uni.$u.toast('您已提交平台介入,请稍后再试')
						}
					}
				})
			},
			submit() {
				this.handlingForm.after_sales_id = this.after_sales_id || ''
				if(this.keyValue == 'store') {
					this.handlingForm.user_type = 'store'
				} else {
					this.handlingForm.user_type = 'user'
				}
				this.$refs.formInfo.validate().then(res => {
					console.log('0--===', this.handlingForm)
					this.btnDis=true
					uni.showLoading({
						title: '加载中'
					});
					submitHandle({
						...this.handlingForm
						}).then(res => {
						if(res.data.code == 200) {
							uni.$u.toast('提交成功')
							if (this.keyValue == 'store') {
								uni.redirectTo({
									url:'/pages/freightOrder/index?index=5'
								})
							} else {
								uni.redirectTo({
									url:'/pages/shipmentRecord/index?index=5'
								})
							}
							uni.hideLoading()
							// this.btnDis=false
						}
					})
				}).catch(errors => {
					uni.$u.toast('请检查是否有未填写字段')
				})
			},
			getHandling(params) {  
				getHandlingSituation(params).then(res => {
					if(res.data.code == 200) {
						this.handlingInfo = res.data.data.data || {}
						console.log('this.handlingInfo====', this.handlingInfo)
						// if (this.handlingInfo.list.length > 0) {
						// 		this.handlingInfo.list.map(item => {
						// 			if (item.handle_money && item.handle_money != '0') {
						// 				if (this.allInfo.quotation_info[0].price > item.handle_money) {
						// 		item.difference = '减免 ' + this.allInfo.price_unit  + Math.abs(this.allInfo.quotation_info[0].price - item.handle_money)
						// 				} else {
						// 		item.difference = '增加 ' + this.allInfo.price_unit + Math.abs(item.handle_money - this.allInfo.quotation_info[0].price)
						// 				}
						// 			}
						// 	})
						// }
					}
				})
			},
			back() {
				// uni.navigateBack()
				this.cback()
			},
			sexSelect(e) {
				this.model1.order.name = e.name
				this.$refs.uForm.validateField('order.name')
			},
			 deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			  },
			  // 新增图片
			  async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
				  this[`fileList${event.name}`].push({
					...item,
					status: "uploading",
					message: this.$t('上传中'),
				  });
				});
				for (let i = 0; i < lists.length; i++) {
				  const result = await this.uploadFilePromise(lists[i].url);
				  let item = this[`fileList${event.name}`][fileListLen];
				  this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
					  status: "success",
					  message: "",
					  url: result,
					})
				  );
				  fileListLen++;
				}
			  },
			  uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
				  let a = uni.uploadFile({
					url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
					filePath: url,
					name: "file",
					formData: {
					  user: "test",
					},
					success: (res) => {
					  setTimeout(() => {
						resolve(res.data.data);
					  }, 1000);
					},
				  });
				});
			  },
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7FB;
	}
	.empty {
			width: 100%;
			height: 200rpx;
		}
		.titleSty {
			color: #1D1D1D;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			// margin-top: 40rpx;
			margin-left: 10rpx;
		}
		.inputSty {
			border-radius: 18rpx;
			background-color: #fff;
			line-height: 75rpx;
			e-input {
				float: right;
			}
			/deep/ .uni-input-input {
				text-align: right;
				margin-right: 50rpx;
			}
		}
		/deep/ .u-form-item__body__left__content__label {
			color: #1D1D1D;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
		}
			uni-button:after {
				border: none;
			}
			.formSty {
				// padding-bottom: 200rpx;
				/deep/ .u-form-item__body {
					padding: 0;
				}
			}
			.contentBg {
				background-color: #fff;
				padding: 0 24rpx;
				margin-top: 24rpx;
				border-radius: 18px;
			}
			.topBg {
				background-color: #fff;
				padding: 0 16rpx;
				margin-top: 24rpx;
				border-radius: 18px;
			}
			.badBtn {
				height: 90rpx;
				border-radius: 18rpx;
				background: #fff !important;
				border: 2rpx solid #D8D8D8;
				margin-top: 24rpx;
				display: flex;
				justify-content: space-between;
			}
			.inputSty2 {
				height:90rpx;
				border-radius: 18rpx;
				border: 2rpx solid #D8D8D8;
				background: #fff;
				margin-top: 24rpx;
				/deep/ .u-text__value--tips {
					font-size: 26rpx !important;
					color: #FE3E3B !important;
				}
			}
			.textareaSty {
				height: 226rpx;
				border-radius: 18rpx;
				border: 2rpx solid #D8D8D8;
				// background: #F7F7F7;
				margin-top: 24rpx;
			}
			.businessSty {
				height: 80rpx;
				border-radius: 18rpx;
				background: #F6F7FB;
				color: #333;
				font-family: "PingFang SC";
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				margin-top: 24rpx;
				text-indent: 24rpx;
			}
			
			// .badBtn {
			// 	height: 80rpx;
			// 	border-radius: 18rpx;
			// 	background: #F7F7F7;
			// 	text-indent: 24rpx;
			// 	color: #333;
			// 	font-family: "PingFang SC";
			// 	font-size: 26rpx;
			// 	font-style: normal;
			// 	font-weight: 400;
			// 	// display: flex;
			// 	// justify-content: space-between;
			// 	.amountCheapSty {
			// 		/deep/ .u-text__value {
			// 			color: #FE3E3B !important;
			// 			font-family: "PingFang SC";
			// 			font-size: 26rpx !important;
			// 			font-style: normal;
			// 			font-weight: 400;
			// 			margin-right: 20rpx;
			// 		}
			// 	}
			// }
		.header {
			font-size: 34rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bold;
			text-align: center;
			position: relative;
			padding-top: var(--status-bar-height);
		}
		.back {
			position: absolute;
			width: 70rpx;
			height: 70rpx;
			top: 15rpx;
		}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		.btn_yellow {
			width: 216rpx;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500rpx;
			// border: 2rpx solid rgba(241, 122, 3, 0.10);
			background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			margin-left:20rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_blue{
			width: 216rpx;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			// border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_item{
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}
		.btn_itemPlat {
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
				display: flex !important;
				flex-direction: column !important;
				border: none !important;
				width: 100rpx;
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.info_jiesuan{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 18rpx;
		background: #F6F7FB;
		padding:20rpx 24rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 40rpx;
		overflow: hidden;
		.jian{
			color: #FE3E3B;
		}
	}
	.disp_title{
		color: #1D1D1D;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 28rpx;
		padding:24rpx 35rpx 10rpx;
	}
	.bor_bgff{
		margin: 20rpx 24rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.disp_info{
		padding:0 24rpx 30rpx;
		.title{
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 28rpx;
			padding:34rpx 0 24rpx;
		}
		.info_text{
			border-radius: 18rpx;
			background: #F6F7FB;
			padding:20rpx 24rpx;
			color: #333;
			font-size: 26rpx;
			line-height: 40rpx;
			overflow: hidden;
		}
	}
	.item_photo{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start; 
		flex-wrap: wrap;
		gap: 18rpx;
		padding:20rpx 0;
		.ph{
			display: block;
			width: 150rpx;
			height: 150rpx;
			flex-shrink: 0;
			border-radius: 15rpx;
		}
	}
	.guanl_order{
		margin: 20rpx 24rpx;
		height: 96rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 16rpx 0 24rpx;
		.name{
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: 600;
		}
		.info{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 600;
	
		}
	}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		.btn_yellow{
			width: 216rpx;
			height: 94rpx;
			text-align: center;
			line-height: 94rpx;
			flex-shrink: 0;
			border-radius: 50rpx;
			border: 2rpx solid rgba(241, 122, 3, 0.10);
			background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
			color: #FFF;
			font-size: 30rpx;
			font-weight: 600;
		}
		.btn_blue{
			width: 216rpx;
			height: 94rpx;
			text-align: center;
			line-height: 94rpx;
			flex-shrink: 0;
			border-radius: 50rpx;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-size: 30rpx;
			font-weight: 600;
		}
		.btn_item{
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.info_jiesuan{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 18rpx;
		background: #F6F7FB;
		padding:20rpx 24rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 40rpx;
		overflow: hidden;
		.jian{
			color: #FE3E3B;
		}
	}
	.disp_title{
		color: #1D1D1D;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 28rpx;
		padding:24rpx 35rpx 10rpx;
	}
	.bor_bgff{
		margin: 20rpx 24rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.disp_info{
		padding:0 24rpx 30rpx;
		.title{
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 28rpx;
			padding:34rpx 0 24rpx;
		}
		.info_text{
			border-radius: 18rpx;
			background: #F6F7FB;
			padding:20rpx 24rpx;
			color: #333;
			font-size: 26rpx;
			line-height: 40rpx;
			overflow: hidden;
		}
	}
	.item_photo{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start; 
		flex-wrap: wrap;
		gap: 18rpx;
		padding:20rpx 0;
		.ph{
			display: block;
			width: 150rpx;
			height: 150rpx;
			flex-shrink: 0;
			border-radius: 15rpx;
		}
	}
	.guanl_order{
		margin: 20rpx 24rpx;
		height: 96rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 16rpx 0 24rpx;
		.name{
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: 600;
		}
		.info{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 600;
	
		}
	}
</style>
